<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疼痛记录 - 脊柱健康监测系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header .subtitle {
            font-size: 1.2em;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .nav {
            background: #34495e;
            padding: 0;
        }

        .nav-list {
            display: flex;
            list-style: none;
            justify-content: center;
            flex-wrap: wrap;
        }

        .nav-item {
            margin: 0;
        }

        .nav-link {
            display: block;
            color: white;
            text-decoration: none;
            padding: 15px 25px;
            transition: background 0.3s ease;
            border-radius: 0;
        }

        .nav-link:hover {
            background: #3498db;
        }

        .nav-link.active {
            background: #e74c3c;
        }

        .content {
            padding: 40px 30px;
        }

        .pain-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .overview-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .overview-card .icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }

        .overview-card .value {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .overview-card .label {
            font-size: 1em;
            opacity: 0.9;
        }

        .record-form {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .form-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 25px;
            text-align: center;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 25px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-label {
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 1em;
        }

        .form-input, .form-select, .form-textarea {
            padding: 12px 15px;
            border: 2px solid #ecf0f1;
            border-radius: 8px;
            font-size: 1em;
            transition: border-color 0.3s ease;
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: #3498db;
        }

        .form-textarea {
            resize: vertical;
            min-height: 100px;
        }

        .pain-scale {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
        }

        .scale-item {
            text-align: center;
            cursor: pointer;
            padding: 10px;
            border-radius: 8px;
            transition: background 0.3s ease;
        }

        .scale-item:hover {
            background: #f8f9fa;
        }

        .scale-item.selected {
            background: #3498db;
            color: white;
        }

        .scale-number {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .scale-label {
            font-size: 0.8em;
        }

        .body-diagram {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            margin: 20px 0;
        }

        .body-image {
            width: 200px;
            height: 300px;
            background: #e9ecef;
            border-radius: 10px;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            font-size: 1.2em;
            position: relative;
        }

        .pain-point {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #e74c3c;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .pain-point:hover {
            transform: scale(1.2);
        }

        .form-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #2980b9 0%, #1f5f8b 100%);
            transform: translateY(-2px);
        }

        .btn-success {
            background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
            color: white;
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
            color: white;
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #7f8c8d 0%, #6c7b7d 100%);
            transform: translateY(-2px);
        }

        .pain-history {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .history-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 25px;
            text-align: center;
        }

        .history-list {
            display: grid;
            gap: 15px;
        }

        .history-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            border-left: 4px solid #3498db;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .history-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .history-date {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .pain-level {
            background: #e74c3c;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.9em;
            font-weight: bold;
        }

        .history-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 10px;
        }

        .detail-item {
            text-align: center;
        }

        .detail-label {
            font-size: 0.8em;
            color: #7f8c8d;
            margin-bottom: 5px;
        }

        .detail-value {
            font-weight: bold;
            color: #2c3e50;
        }

        .history-description {
            color: #7f8c8d;
            font-size: 0.9em;
            margin-top: 10px;
        }

        .trend-chart {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .chart-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 25px;
            text-align: center;
        }

        .chart-placeholder {
            height: 300px;
            background: #f8f9fa;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7f8c8d;
            font-size: 1.2em;
            border: 2px dashed #bdc3c7;
        }

        .footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 50px;
        }

        @media (max-width: 768px) {
            .content {
                padding: 20px 15px;
            }
            
            .nav-list {
                flex-direction: column;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .pain-scale {
                flex-wrap: wrap;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>📊 疼痛记录</h1>
            <p class="subtitle">详细记录疼痛情况，助力康复治疗</p>
        </header>

        <nav class="nav">
            <ul class="nav-list">
                <li class="nav-item"><a href="index.html" class="nav-link">🏠 首页</a></li>
                <li class="nav-item"><a href="posture-detection.html" class="nav-link">📷 姿势识别</a></li>
                <li class="nav-item"><a href="rehabilitation.html" class="nav-link">🏃 康复训练</a></li>
                <li class="nav-item"><a href="pain-record.html" class="nav-link active">📊 疼痛记录</a></li>
                <li class="nav-item"><a href="data-analysis.html" class="nav-link">📈 数据分析</a></li>
                <li class="nav-item"><a href="doctor-portal.html" class="nav-link">👨‍⚕️ 医护端</a></li>
            </ul>
        </nav>

        <main class="content">
            <div class="pain-overview">
                <div class="overview-card">
                    <div class="icon">📊</div>
                    <div class="value">2</div>
                    <div class="label">今日疼痛等级</div>
                </div>
                <div class="overview-card">
                    <div class="icon">📅</div>
                    <div class="value">7</div>
                    <div class="label">连续记录天数</div>
                </div>
                <div class="overview-card">
                    <div class="icon">📈</div>
                    <div class="value">-1.2</div>
                    <div class="label">疼痛改善趋势</div>
                </div>
                <div class="overview-card">
                    <div class="icon">🎯</div>
                    <div class="value">85%</div>
                    <div class="label">记录完整度</div>
                </div>
            </div>

            <div class="record-form">
                <h2 class="form-title">📝 记录今日疼痛情况</h2>
                <form id="painForm">
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">疼痛部位</label>
                            <select class="form-select" id="painLocation">
                                <option value="">请选择疼痛部位</option>
                                <option value="neck">颈部</option>
                                <option value="shoulder">肩部</option>
                                <option value="upper-back">上背部</option>
                                <option value="lower-back">下背部</option>
                                <option value="lumbar">腰部</option>
                                <option value="hip">髋部</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">疼痛时间</label>
                            <input type="datetime-local" class="form-input" id="painTime">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">疼痛等级 (0-10分)</label>
                        <div class="pain-scale">
                            <div class="scale-item" onclick="selectPainLevel(0)">
                                <div class="scale-number">0</div>
                                <div class="scale-label">无痛</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(1)">
                                <div class="scale-number">1</div>
                                <div class="scale-label">轻微</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(2)">
                                <div class="scale-number">2</div>
                                <div class="scale-label">轻微</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(3)">
                                <div class="scale-number">3</div>
                                <div class="scale-label">轻微</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(4)">
                                <div class="scale-number">4</div>
                                <div class="scale-label">轻度</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(5)">
                                <div class="scale-number">5</div>
                                <div class="scale-label">中度</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(6)">
                                <div class="scale-number">6</div>
                                <div class="scale-label">中度</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(7)">
                                <div class="scale-number">7</div>
                                <div class="scale-label">重度</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(8)">
                                <div class="scale-number">8</div>
                                <div class="scale-label">重度</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(9)">
                                <div class="scale-number">9</div>
                                <div class="scale-label">极重</div>
                            </div>
                            <div class="scale-item" onclick="selectPainLevel(10)">
                                <div class="scale-number">10</div>
                                <div class="scale-label">剧痛</div>
                            </div>
                        </div>
                    </div>

                    <div class="body-diagram">
                        <h3>点击身体部位标记疼痛位置</h3>
                        <div class="body-image">
                            <div>人体示意图</div>
                            <div class="pain-point" style="top: 20px; left: 50px;" onclick="markPainPoint('neck')"></div>
                            <div class="pain-point" style="top: 40px; left: 30px;" onclick="markPainPoint('left-shoulder')"></div>
                            <div class="pain-point" style="top: 40px; right: 30px;" onclick="markPainPoint('right-shoulder')"></div>
                            <div class="pain-point" style="top: 80px; left: 50px;" onclick="markPainPoint('upper-back')"></div>
                            <div class="pain-point" style="top: 120px; left: 50px;" onclick="markPainPoint('lower-back')"></div>
                            <div class="pain-point" style="top: 160px; left: 50px;" onclick="markPainPoint('lumbar')"></div>
                            <div class="pain-point" style="top: 200px; left: 30px;" onclick="markPainPoint('left-hip')"></div>
                            <div class="pain-point" style="top: 200px; right: 30px;" onclick="markPainPoint('right-hip')"></div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">疼痛描述</label>
                        <textarea class="form-textarea" id="painDescription" placeholder="请详细描述疼痛的性质、持续时间、诱发因素等..."></textarea>
                    </div>

                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">疼痛类型</label>
                            <select class="form-select" id="painType">
                                <option value="">请选择疼痛类型</option>
                                <option value="sharp">锐痛</option>
                                <option value="dull">钝痛</option>
                                <option value="burning">烧灼痛</option>
                                <option value="stabbing">刺痛</option>
                                <option value="throbbing">搏动痛</option>
                                <option value="cramping">痉挛痛</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">疼痛持续时间</label>
                            <select class="form-select" id="painDuration">
                                <option value="">请选择持续时间</option>
                                <option value="minutes">几分钟</option>
                                <option value="hours">几小时</option>
                                <option value="days">几天</option>
                                <option value="weeks">几周</option>
                                <option value="continuous">持续疼痛</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="clearForm()">清空表单</button>
                        <button type="submit" class="btn btn-success" onclick="submitPainRecord()">保存记录</button>
                    </div>
                </form>
            </div>

            <div class="pain-history">
                <h2 class="history-title">📋 疼痛记录历史</h2>
                <div class="history-list">
                    <div class="history-item">
                        <div class="history-header">
                            <div class="history-date">今天 14:30</div>
                            <div class="pain-level">等级 2</div>
                        </div>
                        <div class="history-details">
                            <div class="detail-item">
                                <div class="detail-label">部位</div>
                                <div class="detail-value">腰部</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">类型</div>
                                <div class="detail-value">钝痛</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">持续时间</div>
                                <div class="detail-value">几小时</div>
                            </div>
                        </div>
                        <div class="history-description">长时间坐姿后出现的轻微腰部不适，活动后有所缓解。</div>
                    </div>

                    <div class="history-item">
                        <div class="history-header">
                            <div class="history-date">昨天 09:15</div>
                            <div class="pain-level">等级 3</div>
                        </div>
                        <div class="history-details">
                            <div class="detail-item">
                                <div class="detail-label">部位</div>
                                <div class="detail-value">颈部</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">类型</div>
                                <div class="detail-value">僵硬</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">持续时间</div>
                                <div class="detail-value">几小时</div>
                            </div>
                        </div>
                        <div class="history-description">早晨起床时颈部僵硬，转动时略有不适。</div>
                    </div>

                    <div class="history-item">
                        <div class="history-header">
                            <div class="history-date">前天 16:45</div>
                            <div class="pain-level">等级 1</div>
                        </div>
                        <div class="history-details">
                            <div class="detail-item">
                                <div class="detail-label">部位</div>
                                <div class="detail-value">肩部</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">类型</div>
                                <div class="detail-value">轻微</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">持续时间</div>
                                <div class="detail-value">几分钟</div>
                            </div>
                        </div>
                        <div class="history-description">工作间隙出现的轻微肩部紧张感。</div>
                    </div>
                </div>
            </div>

            <div class="trend-chart">
                <h2 class="chart-title">📈 疼痛趋势分析</h2>
                <div class="chart-placeholder">
                    <div>
                        <div style="font-size: 3em; margin-bottom: 10px;">📊</div>
                        <div>疼痛趋势图表</div>
                        <div style="font-size: 0.8em; opacity: 0.8; margin-top: 5px;">显示过去7天的疼痛等级变化</div>
                    </div>
                </div>
            </div>
        </main>

        <footer class="footer">
            <p>&copy; 2024 脊柱健康监测与康复指导系统 | 智能健康管理平台</p>
        </footer>
    </div>

    <script>
        let selectedPainLevel = null;

        function selectPainLevel(level) {
            // 移除所有选中状态
            document.querySelectorAll('.scale-item').forEach(item => {
                item.classList.remove('selected');
            });
            
            // 添加选中状态
            event.target.closest('.scale-item').classList.add('selected');
            selectedPainLevel = level;
        }

        function markPainPoint(location) {
            alert(`已标记疼痛部位: ${location}`);
        }

        function clearForm() {
            document.getElementById('painForm').reset();
            selectedPainLevel = null;
            document.querySelectorAll('.scale-item').forEach(item => {
                item.classList.remove('selected');
            });
        }

        function submitPainRecord() {
            if (selectedPainLevel === null) {
                alert('请选择疼痛等级');
                return;
            }
            
            const location = document.getElementById('painLocation').value;
            if (!location) {
                alert('请选择疼痛部位');
                return;
            }
            
            alert(`疼痛记录已保存！\n部位: ${location}\n等级: ${selectedPainLevel}/10`);
        }

        // 设置当前时间
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const timeString = now.toISOString().slice(0, 16);
            document.getElementById('painTime').value = timeString;
        });
    </script>
</body>
</html>
